<template>
  <div class="clock">
    <div class="days">{{currentDay}}</div>
    <!-- HOUR -->
    <div class="numbers">
      <p class="hours">{{hours}}</p>
    </div>
    <div class="colon">
      <p>:</p>
    </div>
    <!-- MINUTE -->
    <div class="numbers">
      <p class="minutes">{{minutes}}</p>
    </div>
    <div class="colon">
      <p>:</p>
    </div>
    <!-- SECOND -->
    <div class="numbers">
      <p class="seconds">{{seconds}}</p>
    </div>
  </div>
</template>
<style scoped>
.clock div {
  display: inline-block;
  position: relative;
  font-weight: normal;
  font-size: 1.5vw;
  letter-spacing: 0.1vw;
  font-family: ds-digitalnormal;
}

.clock div p {
  position: relative;
  margin: 0;
  z-index: 1;
}
</style>
<script>
function addZero(val) {
  return val <= 9 ? "0" + val : val
}
export default {
  data() {
    let self = this
    return {
      currentDay: self.moment().format("YYYY-MM-DD"),
      hours: "",
      minutes: "",
      seconds: ""
    }
  },
  created() {
    this.getCurrentTime()
    setInterval(() => {
      this.getCurrentTime()
    }, 1000)
  },
  methods: {
    getCurrentTime() {
      var date = new Date(),
        hours = date.getHours(),
        minutes = date.getMinutes(),
        seconds = date.getSeconds()
      hours = addZero(hours)
      minutes = addZero(minutes)
      seconds = addZero(seconds)
      this.hours = hours
      this.minutes = minutes
      this.seconds = seconds
    }
  }
}
</script>
